<template>
  <div class="app-container">
    <el-row>
      <div class="resetPassword">
        <el-button @click="resetPassword" v-show="btnVisible.isResetPwd">
          <icon-svg icon-class="zhongzhi2"></icon-svg>&nbsp;&nbsp;恢复密码</el-button>
      </div>
    </el-row>
    <el-row>
      <el-form ref="form" :model="user" label-width="80px">
        <!-- <el-form-item label="账号ID">
                <el-input v-model="user.uid" :disabled="true"></el-input>
              </el-form-item> -->
        <el-form-item label="登录账号">
          <el-input v-model="user.username" :disabled="true" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="账号类型" prop="roleid">
          <el-select v-model="user.roleid" placeholder="请选择账号类型">
            <el-option v-for="role in roles" :key="role.roleid" :label="role.rolename" :value="role.roleid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input v-model="user.usercreatedate" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <div class="block" style="text-align:center;width:300px;">
        <span class="wrapper">
          <el-button @click="onSubmit">
            <icon-svg icon-class="baocun1"></icon-svg>&nbsp;&nbsp;保存</el-button>
          <el-button @click="cancel">
            <icon-svg icon-class="quxiao"></icon-svg>&nbsp;&nbsp;取消</el-button>
        </span>
      </div>
    </el-row>
  </div>
</template>

<style scoped>
.pagination {
  text-align: center;
}

.viewBtn {
  float: right;
}

.el-input {
  width: 210px;
}

.el-select {
  width: 210px;
}

.tips {
  font-size: 14px;
  color: red;
}

.resetPassword {
  float: right;
}
</style>

<script>

import { getRolesList, saveUser, resetPWD } from 'api/system';
import { btnIsVisible } from 'utils/customer';

export default {
  data() {
    return {
      user: {
        uid: null,
        username: null,
        roleid: null,
        usercreatedate: null
      },
      tips: '',
      roles: [],
      dialogVisible: false,
      tipContent: '',
      btnVisible: {
        isResetPwd: false,
      }
    }
  },
  created() {
    this.fetchData();
    this.user.uid = this.$route.query.user.uid;
    this.user.username = this.$route.query.user.username;
    this.user.roleid = this.$route.query.user.roleid;
    this.user.usercreatedate = this.$route.query.user.usercreatedate;
    this.getBtnVisbleStatus()
  },
  methods: {
    getBtnVisbleStatus() {
      this.btnVisible.isResetPwd = btnIsVisible('ACCOUNT_MANAGE_RESET_PWD') || false;
    },
    fetchData() {
      getRolesList().then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.roles = res.data;
        }
      });
    },
    onSubmit() {
      let requestParams = {
        uid: this.user.uid,
        username: this.user.username,
        roleid: this.user.roleid
      }
      saveUser(requestParams).then(response => {
        let res = response.data;
        if (res.flag == 1) {
          let successMessage = res.message;
          this.$confirm(successMessage, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showCancelButton: false,
            type: 'info'
          }).then(() => {
            this.$router.go(-1)
          }).catch(() => {
          });
        } else {
          let failedMessage = res.message;
          this.$message({
            showClose: true,
            message: failedMessage,
            type: 'error'
          });
        }
      });
    },
    cancel() {
      this.$router.go(-1)
    },
    resetPassword() {
      let requestParams = {
        uid: this.user.uid
      }
      resetPWD(requestParams).then(response => {
        let res = response.data;
        if (res.flag == 1) {
          let successMessage = res.message;
          this.$confirm(successMessage, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showCancelButton: false,
            type: 'info'
          }).then(() => {
            this.$router.go(-1)
          }).catch(() => {
          });
          // this.$alert(successMessage, '提示信息', {
          //   confirmButtonText: '确定',
          //   callback: action => {
          //   }
          // });
        } else {
          let failedMessage = res.message;
          this.$alert(failedMessage, '提示信息', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  }
}
</script>